<!-- 流程列表 -->
<template>
  <div class='process_list'>
    <div class="title">
      <span class="text">流程列表</span>
      <Button type="primary" @click="addProcess" v-if="unlocking('0204050100')">新增</Button>
    </div>
    <ul class="content_list">
      <li v-for="(item,index) in processList" :key='item.id'
        :class="[{'list_li_active':isCheckId == index},'list_li']"
        @click="liClick(index,item)">
        {{item.processName}}
      </li>
    </ul>
    <!-- 新增/重命名流程 -->
    <add-or-edit ref='addOrEdit' @success='onSuccess' />
  </div>
</template>

<script>
  import addOrEdit from './addOrEdit.vue'
  import processApi from '@/biz/flowApproval/processManagement'
  export default {
    components: {
      addOrEdit
    },
    data() {
      return {
        processList: [],
        isCheckId: '0',
      }
    },
    methods: {
      liClick(index, data) {
        this.isCheckId = index
        this.$$emit('changeProcessList', data)
      },
      //新增
      addProcess() {
        this.$refs.addOrEdit.create()
      },
      onChangeProcessTitle(val) {
        console.log('###', val)
        this.init(val)
      },
      onSuccess(val) {
        console.log('@@@@@', val)
        this.init(val)
      },
      init(id) {
        this.$$on('changeProcessTitle')
        processApi.processList().then(res => {
          console.log(res)
          this.processList = res
          let index = 0
          if (id && id != 'create') {
            index = this.processList.map(item => item.id).indexOf(id) || 0
          } else {
            if (id == 'create') {
              index = res.length - 1;
              this.isCheckId = res.length - 1
            } else {
              index = 0
            }
          }

          this.$$emit('changeProcessList', res[index])
        })
      }
    },
    mounted() {
      this.init()
    },
  }
</script>
<style lang='scss' scoped>
  .process_list {
    width: 240px;
    height: 100%;
    border: 1px solid #ccc;
    border-radius: 8px;
    max-height: 100%;
    overflow-y: auto;

    .title {
      line-height: 32px;
      font-weight: 600;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;

      .text {
        font-size: 20px;
      }
    }

    .content_list {
      .list_li_active {
        background-color: #daedfd;
      }

      .list_li {
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
    }
  }
</style>